/* CSS变量定义 - 主题颜色管理 */
:root {
  /* 主色调 */
  --primary-color: #409eff;
  --primary-hover: #66b1ff;
  --primary-light: #ecf5ff;
  
  /* 侧边栏颜色 */
  --sidebar-bg: #304156;
  --sidebar-hover: #263445;
  --sidebar-active: #263445;
  --sidebar-text: #bfcbd9;
  --sidebar-text-hover: #fff;
  --sidebar-text-active: #409eff;
  --logo-bg: #2b2f3a;
  --logo-text: #fff;
  
  /* 顶部栏颜色 */
  --header-bg: #fff;
  --header-border: #e6e6e6;
  --header-text: #606266;
  --header-text-hover: #409eff;
  --breadcrumb-text: #606266;
  
  /* 标签导航颜色 */
  --tabs-bg: #fff;
  --tabs-border: #e6e6e6;
  --tabs-text: #606266;
  --tabs-text-hover: #409eff;
  --tabs-bg-hover: #f5f7fa;
  --tabs-bg-active: #409eff;
  --tabs-text-active: #fff;
  
  /* 主内容区域颜色 */
  --main-bg: #f0f2f5;
  --main-text: #303133;
  
  /* 用户信息区域 */
  --user-info-hover: #f5f7fa;
  --username-text: #606266;
  
  /* 通知徽章 */
  --badge-bg: #f56c6c;
  --badge-text: #fff;
  
  /* 阴影效果 */
  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.15);
  
  /* 过渡动画 */
  --transition-duration: 0.3s;
  --transition-timing: ease;

  /* Element Plus 亮色模式变量 */
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;

  /* Element Plus 组件背景色 */
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;

  /* Element Plus 文字颜色 */
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;

  /* Element Plus 边框颜色 */
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;

  /* Element Plus 卡片组件 */
  --el-card-bg-color: #ffffff;
  --el-card-border-color: #e4e7ed;

  /* Element Plus 表格组件 */
  --el-table-bg-color: #ffffff;
  --el-table-tr-bg-color: #ffffff;
  --el-table-header-bg-color: #fafafa;
  --el-table-border-color: #ebeef5;
  --el-table-border: 1px solid var(--el-table-border-color);

  /* Element Plus 输入框组件 */
  --el-input-bg-color: #ffffff;
  --el-input-border-color: #dcdfe6;
  --el-input-hover-border-color: #c0c4cc;
  --el-input-focus-border-color: #409eff;

  /* Element Plus 按钮组件 */
  --el-button-bg-color: #ffffff;
  --el-button-border-color: #dcdfe6;
  --el-button-hover-bg-color: #ecf5ff;
  --el-button-hover-border-color: #c6e2ff;

  /* Element Plus 下拉菜单 */
  --el-dropdown-menu-bg-color: #ffffff;
  --el-dropdown-menu-border-color: #ebeef5;

  /* Element Plus 对话框 */
  --el-dialog-bg-color: #ffffff;
  --el-dialog-border-color: #e4e7ed;

  /* Element Plus 分页组件 */
  --el-pagination-bg-color: #ffffff;
  --el-pagination-border-color: #dcdfe6;
}

/* 暗黑模式变量 */
.dark {
  /* 主色调 - 暗黑模式 */
  --primary-color: #409eff;
  --primary-hover: #66b1ff;
  --primary-light: rgba(64, 158, 255, 0.1);

  /* 侧边栏颜色 - 暗黑模式 */
  --sidebar-bg: #0a0a0a;
  --sidebar-hover: #1a1a1a;
  --sidebar-active: #1a1a1a;
  --sidebar-text: #e5e5e5;
  --sidebar-text-hover: #409eff;
  --sidebar-text-active: #409eff;
  --logo-bg: #1a1a1a;
  --logo-text: #e5e5e5;

  /* 顶部栏颜色 - 暗黑模式 */
  --header-bg: #1a1a1a;
  --header-border: #333333;
  --header-text: #e5e5e5;
  --header-text-hover: #409eff;
  --breadcrumb-text: #e5e5e5;

  /* 标签导航颜色 - 暗黑模式 */
  --tabs-bg: #1a1a1a;
  --tabs-border: #333333;
  --tabs-text: #e5e5e5;
  --tabs-text-hover: #409eff;
  --tabs-bg-hover: #2a2a2a;
  --tabs-bg-active: #409eff;
  --tabs-text-active: #ffffff;

  /* Element Plus 暗黑模式变量 */
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;

  /* Element Plus 组件背景色 - 暗黑模式 */
  --el-bg-color: #1a1a1a;
  --el-bg-color-page: #0a0a0a;
  --el-bg-color-overlay: #1a1a1a;

  /* Element Plus 文字颜色 - 暗黑模式 */
  --el-text-color-primary: #e5e5e5;
  --el-text-color-regular: #cccccc;
  --el-text-color-secondary: #999999;
  --el-text-color-placeholder: #666666;
  --el-text-color-disabled: #404040;

  /* Element Plus 边框颜色 - 暗黑模式 */
  --el-border-color: #333333;
  --el-border-color-light: #404040;
  --el-border-color-lighter: #4a4a4a;
  --el-border-color-extra-light: #555555;

  /* Element Plus 卡片组件 - 暗黑模式 */
  --el-card-bg-color: #1a1a1a;
  --el-card-border-color: #333333;
  --el-fill-color-blank: #1a1a1a;

  /* Element Plus 表格组件 - 暗黑模式 */
  --el-table-bg-color: #1a1a1a;
  --el-table-tr-bg-color: #1a1a1a;
  --el-table-header-bg-color: #2a2a2a;
  --el-table-tr-bg-color: #0a0a0a;
  --el-table-td-bg-color: #0a0a0a;
  --el-table-border-color: #333333;
  --el-table-border: 1px solid var(--el-table-border-color);

  /* Element Plus 输入框组件 - 暗黑模式 */
  --el-input-bg-color: #2a2a2a;
  --el-input-border-color: #404040;
  --el-input-hover-border-color: #606060;
  --el-input-focus-border-color: #409eff;

  /* Element Plus 按钮组件 - 暗黑模式 */
  --el-button-bg-color: #2a2a2a;
  --el-button-border-color: #404040;
  --el-button-hover-bg-color: #404040;
  --el-button-hover-border-color: #606060;

  /* Element Plus 下拉菜单 - 暗黑模式 */
  --el-dropdown-menu-bg-color: #1a1a1a;
  --el-dropdown-menu-border-color: #333333;

  /* Element Plus 对话框 - 暗黑模式 */
  --el-dialog-bg-color: #1a1a1a;
  --el-dialog-border-color: #333333;

  /* Element Plus 分页组件 - 暗黑模式 */
  --el-pagination-bg-color: #1a1a1a;
  --el-pagination-border-color: #404040;

  /* 主内容区域颜色 - 暗黑模式 */
  --main-bg: #0a0a0a;
  --main-text: #e5e5e5;

  /* 用户信息区域 - 暗黑模式 */
  --user-info-hover: #2a2a2a;
  --username-text: #e5e5e5;

  /* 通知徽章 - 暗黑模式 */
  --badge-bg: #f56c6c;
  --badge-text: #fff;

  /* 阴影效果 - 暗黑模式 */
  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  --box-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* 全局CSS重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  background-color: #fff;
}

/* 确保所有容器都不会产生意外的边距 */
.container, .el-container {
  margin: 0;
  padding: 0;
}

#app {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

/* 移除Element Plus可能产生的默认边距 */
.el-header, .el-aside, .el-main, .el-footer {
  margin: 0;
  padding: 0;
}

/* 特别针对用户布局的样式 */
#userLayout {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 登录页面特殊样式 */
.login-container {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 主布局页面允许滚动 */
#basicLayout {
  height: 100vh;
  overflow: auto;
}

/* 主内容区域允许滚动 */
.main-content {
  overflow-y: auto;
}

.search-card {
  margin-bottom: 16px;
}

.search-form {
  margin-bottom: 0;
}

.action-card {
  margin-bottom: 16px;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.pagination-container {
  display: flex;
  justify-content: end;
  margin-top: 20px;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}

/* Element Plus 暗黑模式额外样式覆盖 */
.dark {
  /* 表格行悬停效果 */
  .el-table__body tr:hover > td {
    background-color: #2a2a2a !important;
  }

  /* 表格条纹行 */
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #222222 !important;
  }

  /* 表格空状态 */
  .el-table__empty-block {
    background-color: #1a1a1a !important;
  }

  .el-table__empty-text {
    color: #999999 !important;
  }

  /* 选择器下拉框 */
  .el-select-dropdown {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
  }

  .el-select-dropdown__item {
    color: #e5e5e5 !important;
  }

  .el-select-dropdown__item:hover {
    background-color: #2a2a2a !important;
    color: #409eff !important;
  }

  .el-select-dropdown__item.selected {
    background-color: #409eff !important;
    color: #ffffff !important;
  }

  /* 复选框和单选框 */
  .el-checkbox__label,
  .el-radio__label {
    color: #e5e5e5 !important;
  }

  .el-checkbox__inner,
  .el-radio__inner {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
  }

  /* 开关组件 */
  .el-switch__core {
    background-color: #404040 !important;
    border-color: #404040 !important;
  }

  .el-switch.is-checked .el-switch__core {
    background-color: #409eff !important;
    border-color: #409eff !important;
  }

  /* 标签组件 */
  .el-tag {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
    color: #e5e5e5 !important;
  }

  /* 消息提示 */
  .el-message {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #e5e5e5 !important;
  }

  /* 通知组件 */
  .el-notification {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #e5e5e5 !important;
  }

  /* 加载遮罩 */
  .el-loading-mask {
    background-color: rgba(0, 0, 0, 0.8) !important;
  }

  .el-loading-spinner .el-loading-text {
    color: #e5e5e5 !important;
  }

  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background-color: #1a1a1a;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #404040;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #606060;
  }

  /* 代码块和预格式化文本 */
  pre {
    background-color: #1a1a1a !important;
    color: #e5e5e5 !important;
    border-color: #333333 !important;
  }

  code {
    background-color: #2a2a2a !important;
    color: #e5e5e5 !important;
  }

  /* 链接样式 */
  a {
    color: #409eff !important;
  }

  a:hover {
    color: #66b1ff !important;
  }

  /* 分割线 */
  hr {
    border-color: #333333 !important;
  }

  /* 选择文本 */
  ::selection {
    background-color: #409eff !important;
    color: #ffffff !important;
  }

  ::-moz-selection {
    background-color: #409eff !important;
    color: #ffffff !important;
  }
}